<template>
  <view class="changePassword_container">
    <view class="item">
      <text>原密码</text>
      <input v-model="password" placeholder="请输入原密码" />
    </view>
    <view class="item">
      <text>新密码</text>
      <input v-model="password1" placeholder="请输入新密码" />
    </view>
    <view class="item">
      <text>确认密码</text>
      <input v-model="password2" placeholder="请输入确认密码" />
    </view>
    <view class="item-confirm">
      <view
        class="confirm"
        @click="confirm"
        :style="password && password1 && password2 ? 'background:#0F70E1' : ''"
      >
        确认密码
      </view>
    </view>
  </view>
</template>

<script>
import { changePassword } from '@/api/setting/index.js'
import { setPassword } from '@/api/invoicer'

export default {
  data() {
    return {
      password: '',
      password1: '',
      password2: '',
      title: ''
    }
  },
  onLoad(e) {
    this.title = e.title
  },
  methods: {
    confirm() {
      if (!this.password) {
        uni.showToast({ icon: 'none', title: '请输入原密码', mask: true })
        return
      }

      if (!this.password1) {
        uni.showToast({ icon: 'none', title: '请输入新密码', mask: true })
        return
      }
      if (!this.password2) {
        uni.showToast({ icon: 'none', title: '请输入确认密码', mask: true })
        return
      }

      if (this.password1 === this.password2) {
        if (this.title === '业务员') {
          setPassword({ newPassword: this.password2, password: this.password }).then(r => {
            if (r.code === 200) {
              uni.navigateTo({ url: '/pages_user/reg/index' })
            }
          })
          return
        }

        changePassword({ newPassword: this.password2, password: this.password }).then(res => {
          if (res.code === 200) {
            // 跳转到登录页
            uni.removeStorageSync('token')
            uni.switchTab({ url: '/pages/index/index' })
          }
        })
      } else {
        uni.showToast({ icon: 'none', title: '两次输入的密码不一致', mask: true })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.changePassword_container {
  background: #f9f9f9;
  max-height: 100vh;
  padding-top: 20rpx;
}

.item {
  background: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  padding: 40rpx 50rpx;
  border-bottom: 1px solid #f9f9f9;

  input {
    border: 0;
    font-size: 24rpx;
  }

  text {
    width: 25%;
  }
}

.item-confirm {
  background: #fff;
  font-size: 28rpx;
  padding-top: 20%;
  padding-bottom: 10%;

  .confirm {
    background: #c6c6c6;
    color: #fff;
    font-size: 28rpx;
    width: 70%;
    padding: 14rpx;
    border-radius: 100rpx;
    margin: 0 auto;
    text-align: center;
  }
}
</style>
